<!--
 * @Author: LiZn
 * @Date: 2021-08-20 01:46:40
 * @LastEditTime: 2021-08-22 11:34:56
 * @LastEditors: LiZn
 * @Description: file content
 * @FilePath: \todaynews\src\views\My.vue
-->
<template>
  <div id="my">
    <!-- 弹出框从右边出来 -->
    <el-drawer
      direction="rtl"
      :visible.sync="drawerleft"
      size="100%"
    >
      从左边飘出来 1
    </el-drawer>
    <div class="topset">
      <i class="el-icon-full-screen"></i>
      <i @click="setBut" class="el-icon-setting"></i>
    </div>
    <div class="mycontent">
      <div class="header">
        <div class="login">
          <transition name="fade">
            <span v-if="!loginShow">
              {{getUserName}}
            </span>
          </transition>
          <transition name="fade">
            <span v-if="loginShow" @click="dian">登录</span>
          </transition>
        </div>
      </div>  
      <div class="infos">
          <ul class="infoslist">
            <li>
              <i class="el-icon-bell"></i>
              <span>消息通知</span>
            </li>
            <li>
              <i class="el-icon-star-off"></i>
              <span>收藏</span>
            </li>
            <li>
              <i class="el-icon-time"></i>
              <span>浏览历史</span>
            </li>
            <li>
              <i class="el-icon-download"></i>
              <span>下载管理</span>
            </li>
          </ul>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        loginShow:true,
        drawerleft:false,
        clientHeight:300,
        getUserName:localStorage.getItem('username')||'',
      }
    },
    created(){
      if(localStorage.getItem('userToken')){
        this.loginShow = false;
      }
    },
    methods:{
      dian(){
        this.$loginMes()
      },
      setBut(){
        this.drawerleft = true
      }
    },
    mounted(){
      document.querySelector('#my').style = `height:${document.documentElement.clientHeight + 'px'};background:rgb(241, 240, 250)`;
    },
    beforeRouteLeave(to,from,next){
      this.$store.commit("setMyScroll",document.documentElement.scrollTop);
      next()
    },
    beforeRouteEnter(to,from,next){
      next(vm=>{
        vm.$nextTick(()=>{
          document.documentElement.scrollTop = vm.$store.state.myScrollTop;
        })
      })
    }
  }

</script>
<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .topp{
    font-size: 0.5rem;
  }
  .mycontent{
    margin:0 0.2rem;
  }
  .login{
    display:flex;
    width:2rem;
    height:2rem;
    border-radius:2rem;
    background:red;
    align-items:center;
    justify-content: center
  }
  .login span{
    color:rgb(255, 255, 255);
    font-size:0.4rem;
  }
  .topset{
    width:100%;
    box-sizing:border-box;
    padding:0 0.2rem;
    height:0.8rem;
    position:fixed;
    top:0;
    background:rgb(241, 240, 250);
    display:flex;
    justify-content: space-between;
    align-items:center;
  }
  .topset i {
    font-size:0.5rem;
  }
  .header{
    width:100%;
    height:3rem;
    margin-top:0.8rem;
    display:flex;
    justify-content: center;
    align-items: center;
  }
  .infos{
    width:100%;
    height:1.8rem;
    background:white;
    border-radius:0.1rem;
  }
  .infoslist{
    height:inherit;
    display:flex;
    flex-direction: row;
    align-items: center
  }
  .infoslist li{
    width:25%;
    display:flex;
    flex-direction: column;
  }
  .infoslist li i{
    font-size:.5rem;
    color:rgb(228, 73, 67);
    padding-bottom:0.1rem
  }
  .loginclasss{
    width:80%;
    display:flex;
    flex-direction:column;
    margin:0 auto;
    text-align:left;
    margin-top:1rem;
  }
  .loginclasss label:nth-child(3){
    margin-top:.5rem;
  }
  .logintop{
    margin-top:0.5rem
  }
</style>